// 子流程编辑
<template>
  <div class="t_drawer_body">
    <t_tab_container notHasTabs>
      <div class="tab_content">
        <fieldLabel>标题设置</fieldLabel>
        <Input v-model="data.title" />
        <fieldLabel>审批设置</fieldLabel>
        <RadioGroup v-model="data.initiateType">
          <Row>
            <Col span="6">
              <Radio :value="1">指定人员</Radio>
            </Col>
            <Col span="6">
              <Radio :value="2">部门主管</Radio>
            </Col>
            <Col span="6">
              <Radio :value="3">发起者主管</Radio>
            </Col>
            <Col span="6">
              <Radio :value="4">发起者本人</Radio>
            </Col>
          </Row>
        </RadioGroup>
        <p class="hint">{{ settingHint }}</p>
        <template v-if="data.initiateType === 1">
          <chooserRole
            :requestConfig="requestConfig"
            ref="chooserRole"
            :propsSelected="data.initiateRole"
          />
          <chooserPerson
            :requestConfig="requestConfig"
            :propsSelected="data.initiator"
            ref="chooserPerson"
          />
        </template>
        <template v-if="data.initiateType === 3">
          <fieldLabel>发起者的</fieldLabel>
          <Select style="width: 100%" v-model="data.managerLevel">
            <SelectOption :value="1"> 直接主管 </SelectOption>
            <SelectOption :value="2"> 第2级主管 </SelectOption>
            <SelectOption :value="3"> 第3级主管 </SelectOption>
            <SelectOption :value="4"> 第4级主管 </SelectOption>
          </Select>
        </template>
        <fieldLabel>子流程表单</fieldLabel>
        <Select style="width: 100%" v-model="data.flowId"> </Select>
        <fieldLabel>数据传递</fieldLabel>
        <Select style="width: 100%" @change="() => {}"> </Select>
        <fieldLabel>通知设置</fieldLabel>
        <CheckboxGroup v-model="data.messageType">
          <Checkbox :value="1">站内信</Checkbox>
          <Checkbox :value="2">邮箱</Checkbox>
          <Checkbox :value="3">短信</Checkbox>
          <Checkbox :value="4">钉钉</Checkbox>
          <Checkbox :value="5">企业邮箱</Checkbox>
        </CheckboxGroup>
      </div>
    </t_tab_container>
    <div class="t_buttom_group">
      <Button style="margin-right: 10px" @click="() => $emit('close')"
        >取消</Button
      >
      <Button type="primary" @click="confirm">确定</Button>
    </div>
  </div>
</template>

<script>
import t_tab_container from "./components/t_tab_container.vue";
import fieldLabel from "./components/fieldLabel.vue";
import EventBus from "../eventBus";
import chooserRole from "./components/chooserRole.vue";
import chooserPerson from "./components/chooserPerson.vue";
import message from "ant-design-vue/lib/message";
import { verify_s } from "../../utils/verify";
import Input from "ant-design-vue/lib/input";
import Radio, { Group as RadioGroup } from "ant-design-vue/lib/radio";
import Select from "ant-design-vue/lib/select";
import Checkbox from "ant-design-vue/lib/checkbox";
import Button from "ant-design-vue/lib/button/button";
import Row from "ant-design-vue/lib/row";
import Col from "ant-design-vue/lib/col";

const { Option } = Select;
const SelectOption = Option;
const { Group } = Checkbox;
const CheckboxGroup = Group;
export default {
  components: {
    t_tab_container,
    fieldLabel,
    chooserRole,
    chooserPerson,
    Input,
    Radio,
    RadioGroup,
    Select,
    SelectOption,
    Checkbox,
    CheckboxGroup,
    Button,
    Row,
    Col,
  },

  props: {
    nodeData: Object,
    customFields: Array,
    requestConfig: Object,
  },

  computed: {
    settingHint() {
      switch (this.data.initiateType) {
        case 1:
          return "所指定的成员将作为子流程发起人，多人时，发起多个子流程";
        case 2:
          return "发起者的部门主管将作为子流程发起人";
        case 3:
          return "发起者的主管将作为子流程发起人";
        case 4:
          return "发起者自己将作为子流程发起人";
        default:
          return "";
      }
    },
  },
  data() {
    return {
      data: JSON.parse(JSON.stringify(this.nodeData.dataProps)),
      explain: "",
      r_person: 1,
      r_type: 1,
      percent1: 0,
      percent2: 0,
    };
  },

  methods: {
    increase(key) {
      let percent = this["percent" + key] + 10;
      if (percent > 100) {
        percent = 100;
      }
      this["percent" + key] = percent;
    },
    decline(key) {
      let percent = this["percent" + key] - 10;
      if (percent < 0) {
        percent = 0;
      }
      this["percent" + key] = percent;
    },
    confirm() {
      let copyData = JSON.parse(JSON.stringify(this.data));
      let chooserRoleData = [];
      let chooserPersonData = [];
      if (this.$refs.chooserRole) {
        chooserRoleData = this.$refs.chooserRole.getSelectedData();
      }
      if (this.$refs.chooserPerson) {
        chooserPersonData = this.$refs.chooserPerson.getSelectedData();
      }
      copyData.initiateRole = chooserRoleData;
      copyData.initiator = chooserPersonData;

      let verifyInfo = verify_s(copyData);
      if (verifyInfo.pass) {
        EventBus.$emit("UPDATE_NODE", {
          nodeId: this.nodeData.nodeId,
          path: this.nodeData.path,
          dataProps: copyData,
        });
        this.$emit("close");
      } else {
        message.warning(verifyInfo.message.join("、"));
      }
    },
  },
};
</script>

<style scoped>
.t_drawer_body {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 55px);
}

.t_tabs {
  flex: 1;
}

.t_buttom_group {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding: 24px;
}
.tab_content {
  padding: 0 24px;
}

.hint {
  font-size: 14px;
  color: #a5a5a5;
}

.cc_setting {
  display: flex;
  flex-direction: column;
}

.cust_btn_sty {
  width: 120px;
  margin-bottom: 10px;
}

.action_group {
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.custom_checkbox {
  width: 100px;
}
</style>
